appDisplay: Set running indicator dot offset via CSS

The offset was given as a hardcoded (physical) pixel value and did not
take scaling into account. This lead to it being shifted closer towards
the icon as the scale increased.

This now replaces the hardcoded value with a CSS property which
automatically includes the scale factor.

Further this allows simplifying some calculations that previously were
trying to counteract the hardcoded offset using margins by using the
intended offset directly.

With this the dot in the dash is also now placed at exactly the bottom
of the hover highlight, while previously there was an unintentional 1px
space.

Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7488
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3245>
(cherry picked from commit 31997fa2f9f3183d97c22f073e878b308331f288)

diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index fcada18a207ff1c1f5b0b3b270f08419fc3407e6..179b2d51e0d9db621fd3eab4718a8c0a5906c33d 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -49,9 +49,9 @@ $app_folder_size: 720px;
   background-color: $system_fg_color;
 
   @if $contrast == 'high' {
-    margin-bottom: 4px;
+    offset-y: 4px;
   } @else {
-    margin-bottom: 2px;
+    offset-y: 6px;
   }
 }
 

diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index db378ca1e4306fddb7964cdcae9388faebcfae7a..ecb7912954aeeaa07c6a07b5da68e226c470427e 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -69,7 +69,7 @@ $dash_spacing: $base_margin * 0.5;
     // running app dot
     .app-grid-running-dot {
       // manually position the dot within the dash item
-      margin-bottom: $dash_padding + $dash_edge_offset - 3px; // 3px = size of dot (5px) subtracted from its translationY from appDisplay.js
+      offset-y: -$dash_padding;
     }
   }
 

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index aca6002eb2d74b6970bcee8865c1d42d99739da3..a60442e9b22bd8a16c05bb9d4f3c5da5f36a77e5 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -3019,7 +3019,7 @@ export const AppIcon = GObject.registerClass({
             x_align: Clutter.ActorAlign.CENTER,
             y_align: Clutter.ActorAlign.END,
         });
-        this._dot.translationY = 8;
+        this._dot.connect('style-changed', () => this._updateDotStyle());
         this._iconContainer.add_child(this._dot);
 
         this.label_actor = this.icon.label;
@@ -3064,6 +3064,11 @@ export const AppIcon = GObject.registerClass({
         }
     }
 
+    _updateDotStyle() {
+        const themeNode = this._dot.get_theme_node();
+        this._dot.translationY = themeNode.get_length('offset-y');
+    }
+
     _updateRunningStyle() {
         if (this.app.state !== Shell.AppState.STOPPED)
             this._dot.show();